<template>
  <v-app>
    <!-- 顶部导航栏 -->
    <v-app-bar color="primary" dark>
      <v-app-bar-title>Simple CI</v-app-bar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-bell</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-account-circle</v-icon>
      </v-btn>
    </v-app-bar>

    <v-navigation-drawer expand-on-hover rail>
      <v-list-item prepend-icon="mdi-menu" title="菜单"></v-list-item>
      <v-divider></v-divider>
      <v-list-item link title="项目" prepend-icon="mdi-box-shadow" href="/project"></v-list-item>
      <v-list-item link title="构建工具" prepend-icon="mdi-tools" href="/tools"></v-list-item>
      <v-list-item link title="List Item 3"></v-list-item>
    </v-navigation-drawer>

    <!-- 内容区域 -->
    <v-container class="mt-6 v-container">
      <!-- 信息概览 -->
      <v-row>
        <v-col cols="12" md="4">
          <v-card class="pa-4" outlined>
            <v-card-title>构建状态</v-card-title>
            <v-card-subtitle>运行中任务: 3</v-card-subtitle>
          </v-card>
        </v-col>
        <v-col cols="12" md="4">
          <v-card class="pa-4" outlined>
            <v-card-title>今日构建</v-card-title>
            <v-card-subtitle>成功: 12 / 失败: 2</v-card-subtitle>
          </v-card>
        </v-col>
        <v-col cols="12" md="4">
          <v-card class="pa-4" outlined>
            <v-card-title>系统负载</v-card-title>
            <v-card-subtitle>内存: {{MemUsage}}%</v-card-subtitle>
          </v-card>

        </v-col>
      </v-row>


      <v-card class="mt-6 sub-container" outlined>
        <v-card-title>{{currentPage}}</v-card-title>
        <router-view/>
      </v-card>
    </v-container>

    <v-footer class="flex-column">
      <span>JamesTang</span>
    </v-footer>
  </v-app>
</template>


<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRoute} from "vue-router";

const currentPage = ref<string>()
const MemUsage = ref(-1)


currentPage.value = useRoute().meta['title'] as string;

const getMemUsage = () => {
   const sse = new EventSource('http://localhost:8718/status');
  sse.onmessage = (event) => {
    MemUsage.value = JSON.parse(event.data).memory
  }
}


onMounted(() => {
 getMemUsage()
})



</script>

<style lang="scss" scoped>
.v-container {
  min-height: calc(100vh - 64px); /* 64px 是导航栏高度 */
}

.sub-container{
  height: 80vh;
}
</style>
